<template>
  <div id="app">
    <!-- 面包屑 -->
    <el-breadcrumb separator=">">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>
        <a href="/">权限管理</a>
      </el-breadcrumb-item>
      <el-breadcrumb-item>角色列表</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 面板 -->
    <el-card class="box-card">
      <el-row>
        <el-col>
          <el-button type="primary">添加角色</el-button>
        </el-col>
      </el-row>
      <el-table :data="rolelist" style="width: 100%">
        <el-table-column type="expand">

      <template slot-scope="scope">
            <el-row v-for="first in scope.row.children"   class="bdtop venter">
              
          
              <el-col :span="6">
                <el-tag closable>{{first.authName}}</el-tag>
                <i class="el-icon-caret-right"></i>
              </el-col>
              <el-col :span="18">
                <el-row v-for="second in first.children">
                  <el-col :span="6">
                    <el-tag closable>{{second.authName}}</el-tag>
                     <i class="el-icon-caret-right"></i>
                  </el-col>
                  
                  <el-col :span="12">
                    <el-tag  closable v-for="three in second.children" 
                    type="warning" @close="removeRightsById(scope.row,three.id)">{{three.authName}}</el-tag>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </template> 

        <!-- 三级 -->
        </el-table-column>
        <el-table-column type="index"></el-table-column>
        <el-table-column prop="roleName" label="角色名称"></el-table-column>
        <el-table-column prop="roleDesc" label="角色描述"></el-table-column>
        <el-table-column prop="level" label="操作">
          <template slot-scope="scope">
            <el-button type="danger" icon="el-icon-edit">编辑</el-button>
            <el-button type="warning" icon="el-icon-delete">删除</el-button>
            <el-button type="info" icon="el-icon-setting"
            @click="showSetRightDialog(scope.row)"
            >分配角色</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
<el-dialog
  title="分配权限"
  :visible.sync="setRightDialogVisible"
  width="50%"
  @close="setRightDialogClosed"
  >
  <!-- 权限树 -->
  <el-tree 
  :data="rightslist" 
  :props="treeProps"
  node-key="id"
   default-expand-all
  show-checkbox
  :default-checked-keys="defkeys"
  ref="treeRef"
   ></el-tree>

  <span slot="footer" class="dialog-footer">
    <el-button @click="setRightDialogVisible">取 消</el-button>
    <el-button type="primary" >确 定</el-button>
  </span>
</el-dialog>

  </div>
</template>

<script>
export default {
  data() {
    return {
      rolelist: [],
      setRightDialogVisible:false,
      rightslist:[],
      treeProps:{
        label:"authName",
        children:"children",

      },
      defkeys:[]
    };

  },
  created() {
    this.getrolelist();
  },
  methods:{
    async allotRights(){
      const keys=[
        ...this
      ]
    },
  setRightDialogClosed(){
    this.defkeys=[]
  },
  
    getLeafkeys(n,arr){
      if(!n.children){
        return  arr.push(n.id)
      }
      n.children.forEach(item=>{
        this.getLeafkeys(item,arr)
      });
     
    },
    // 分配权限
    async showSetRightDialog(role){
        const{data:res}=await this.$http.get("rights/tree")
        if(res.meta.status!=200){
          return this.$message.error("获取权限失败!")
        }
        console.log(res);
        this.rightslist=res.data;
        this.getLeafkeys(role,this.defkeys)
        this.setRightDialogVisible=true
        
    },
    async getrolelist() {
      let { data: res } = await this.$http.get("roles");
      console.log(res);
      if (res.meta.status != 200) return this.$message.error("权限获取失败");
      this.rolelist = res.data;
    },
    async removeRightsById(role,id){
       let result = await this.$confirm(
         
        "此操作将永久删除用户, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      ).catch(err => err);
      if (result !== "confirm") return this.$message.info("取消删除");
      // console.log("确定");
      
      let { data: res } = await this.$http.delete(`roles/${role.id}/rights/${id}`);
      if (res.meta.status != 200) return this.$message.error("删除失败");
      this.$message.success("删除成功");
      // console.log(res);
      // console.log(role);
      
      // console.log(role.children);
      
      
      // role.children=res.data;
      this.getrolelist();
    }
  }
};
</script>

<style lang="less" scoped>
</style>

